import React, { useState, useEffect } from 'react';
import { Button, Form, Input, InputNumber, Select, DatePicker, message } from 'antd';
import ADD_EDIT_CUSTOM_MODAL from '@Components/CustomModal/Add_Eidt_Custom_Modal';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');
// 创建组件,使用hooks
const IndexAddEidtForm = ({IndexAddEidtTypeObject, Visible, Modal_Cancel, PushData_Object}) => {
  const [ModalTitle, setModalTitle] = useState(''); // 新增/编辑弹窗标题
  const [EidtRowDataID, setEidtRowDataID] = useState(''); // 编辑数据id
  /**
   * @date: 2024-09-10 20:43:54
   * @description: 创建表单实例
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const [Add_Eidt_ModalForm] = Form.useForm();  
  /**
   * @date: 2024-09-10 20:13:43
   * @description: 新增/编辑弹窗取消
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const Add_Eidt_Custom_Modal_Cancel = () => {
    Add_Eidt_ModalForm.resetFields(); // 重置表单
    Modal_Cancel(false)
  };
  /**
   * @date: 2024-09-10 20:20:47
   * @description: 新增/编辑弹窗确定提交
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const Add_Eidt_Custom_Modal_Submit = () => {
    Add_Eidt_ModalForm.validateFields().then(val => {
      let PushData = {
        name: val.name,
        age: val.age,
        gender: val.gender,
        birthDate: dayjs(val.birthDate).format('YYYY-MM-DD'),
        address: val.address,
        ModalType: IndexAddEidtTypeObject.ModalType
      }
      if (IndexAddEidtTypeObject.ModalType !== 'add') {
        PushData.id = EidtRowDataID;
      }
      PushData_Object(PushData)
    }).catch(err => {
      console.log('表单验证失败', err)
      message.error(
        '请按要求填写', 
        [2]
      )
      return false;
    })
  };
  
  useEffect(() => {
    if (IndexAddEidtTypeObject.ModalType === 'add') {
      setModalTitle('新增用户');
    } else {
      setModalTitle('编辑用户');
      if(Object.keys(IndexAddEidtTypeObject.RowData).length === 0 && IndexAddEidtTypeObject.RowData.constructor === Object) {
        return;    
      } else {
        // 将当前行数据进行一次深拷贝
        const deepCopyData = JSON.parse(JSON.stringify(IndexAddEidtTypeObject.RowData));
        deepCopyData.birthDate = dayjs(deepCopyData.birthDate)
        setEidtRowDataID(deepCopyData.id) // 编辑数据id
        // 表单数据回显
        Add_Eidt_ModalForm.setFieldsValue(deepCopyData);  
        
      }
      
    }
  }, [IndexAddEidtTypeObject, Add_Eidt_ModalForm]);
  
  /**
   * @date: 2024-09-11 00:20:04
   * @description: 弹窗footer
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const footerContent = [
    <Button key="back" onClick={Add_Eidt_Custom_Modal_Cancel}>取消</Button>,
    <Button key="submit" type="primary" onClick={Add_Eidt_Custom_Modal_Submit}>提交</Button>,
  ];
  return (
    <div>
      {/* 新增编辑弹窗 */}
      <ADD_EDIT_CUSTOM_MODAL
        visible={Visible}
        title={ModalTitle}
        footer={footerContent}
        onCancel={Add_Eidt_Custom_Modal_Cancel}
      >
        <Form
          form={Add_Eidt_ModalForm}
          labelCol={{span: 4}}
          wrapperCol={{span: 20}}
          labelAlign={'right'}
          onFinish={Add_Eidt_Custom_Modal_Submit}
        >
          <Form.Item
            label="姓名"
            name='name'
            rules={[
              {required: true, message: '请输入姓名'}
            ]}
          >
            <Input placeholder="请输入姓名..." allowClear/>
          </Form.Item>
          
          <Form.Item
            label="年龄"
            name='age'
            rules={[
              {required: true, message: '请输入年龄'}
            ]}
          >
            <InputNumber style={{width: '100%'}} min={0} datatype={0}  placeholder="请输入年龄..."/>
          </Form.Item>

          <Form.Item
            label="性别"
            name='gender'
            rules={[
              {required: true, message: '请选择性别'}
            ]}
          >
            <Select 
              options={[
                { value: 0, label: '女' },
                { value: 1, label: '男' },
              ]}
              placeholder="请选择性别..."
              notFoundContent="暂无数据"
              allowClear
            />
          </Form.Item>

          <Form.Item
            label="出生日期"
            name='birthDate'
            rules={[
              {required: true, message: '请选择出生日期'}
            ]}
          > 
            <DatePicker
              style={{width: '100%'}}
              format={'YYYY-MM-DD'}
              placeholder="请选择出生日期..."
              allowClear
            />
          </Form.Item>

          <Form.Item
            label="住址"
            name='address'
            rules={[
              {required: true, message: '请输入住址'}
            ]}
          >
            <Input placeholder="请输入住址..." allowClear/>
          </Form.Item>
        </Form>
      </ADD_EDIT_CUSTOM_MODAL>
      {/* 新增编辑弹窗END */}
    </div>
  );
}

export default IndexAddEidtForm;